import React, { Component } from 'react'
import { PureComponent } from 'react'
import './index.css'
const myusername= React.createContext()//创建一个上下文
//解构赋值
const {Provider,Consumer}=myusername
export default class A extends PureComponent {//浅比较对象变起作用  push unshift等都不变
    state = {username:'tom',age:18}
    
    huan =()=>{
        this.setState({username:'002'})
    }
    // shouldComponentUpdate(nextProps,nextState){
    //  if(this.state.username===nextState.username) return false
    //  else return true
    // } 

    render() {
        const {username,age} = this.state
        return (
            
            <div className="parent">
                <h3>a:{username}</h3>
                <button onClick={this.huan}>111</button>
                    <B username={username} render={(name)=><C name={name}/>}/>
                    {/* render是自定义的可变 */}
                        
            </div>
        )
    }
}
class B extends PureComponent {
    render() {
        return (
            <div className="child">
                <h3>a传过来的name:{this.props.username}</h3>
                {this.props.render(this.props.username)}
            </div>
        )
    }
}
class C extends Component {
    //声明接收
    static contextType=myusername
    render() {
        return (
            <div className="grand">
                <h3>b传过来的name:{this.props.name}</h3>
            </div>
        )
    }
}
// function C(){

//         return (
//             <div className="grand">
//                 <h3>b传过来的name:
//                     <Consumer>
//                         {
//                             value=>{
//                                 return `${value.username}`//<span>{value.username}</span> 
//                             }
//                         }
//                     </Consumer>
//                 </h3>
//             </div>
//         )
    
// }
